<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width:90%;margin:0 auto;margin-top: 30px;">
        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">活动信息</a-col>
        </a-row>

        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="活动代码">
            <span class="ant-form-text">{{queryDetail.code}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="活动名称">
            <span class="ant-form-text">{{queryDetail.name}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="活动周期开始">
            <span class="ant-form-text">{{queryDetail.beginDate | dateFilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="活动周期结束">
            <span class="ant-form-text">{{queryDetail.endDate | dateFilter}}</span>
          </a-form-item>

          <div v-if="queryDetail.activateTarget">
            <a-row>
              <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">激活考核</a-col>
            </a-row>

            <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易量指标">
              <span
                v-if="queryDetail.activateTarget.type == 'first_trans'"
              >首笔交易≥{{queryDetail.activateTarget.amount | cashfilter}}</span>
              <span
                v-if="queryDetail.activateTarget.type == 'sum_trans'"
              >累计交易≥{{queryDetail.activateTarget.amount | cashfilter}}</span>
              <span
                v-if="queryDetail.activateTarget.type == 'first_fee'"
              >首笔交易商户支付服务费{{queryDetail.activateTarget.amount | cashfilter}}</span>
            </a-form-item>

            <a-form-item class="formItemWidth">
              <!-- <span class="ant-form-text">{{queryDetail.externalAccountType }}</span> -->
            </a-form-item>

            <a-form-item class="formItemWidth" v-bind="formItemLayout" label="激活">
              <span class="ant-form-text">返现{{queryDetail.activateTarget.rewardAmount | cashfilter}}</span>
            </a-form-item>

            <a-form-item class="formItemWidth" v-bind="formItemLayout" label="未激活">
              <span
                class="ant-form-text"
              >扣款{{queryDetail.activateTarget.forfeitAmount | cashfilter}}</span>
            </a-form-item>
          </div>

          <div v-if="queryDetail.transTargetList.length > 0">
            <a-row>
              <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">交易量考核</a-col>
            </a-row>

            <a-form-item
              style="width:100%;"
              v-bind="formItemLayout1"
              :label="`自${queryDetail.activateConfig ? '激活' : '首笔交易'}之日起`"
            >
              <span
                v-for="(item,index) in addUpList"
                :key="index"
              >第{{item.startDay}}至{{item.endDay}}天，交易量累计{{item.typeName}}{{item.targetAmount | cashfilter}}，返现{{item.rewardAmount | cashfilter}}；</span>
            </a-form-item>
            <a-form-item
              style="width:100%;"
              v-bind="formItemLayout1"
              :label="`自${queryDetail.activateConfig ? '激活' : '首笔交易'}之日起`"
            >
              <span
                v-for="(item,index) in DeductionList"
                :key="index"
              >第{{item.startDay}}至{{item.endDay}}天，交易量累计{{item.typeName}}{{item.targetAmount | cashfilter}}，扣款{{item.rewardAmount | cashfilter}}；</span>
            </a-form-item>
          </div>
        </a-form>

        <a-button @click="backTransList">
          <a-icon type="double-left" />返回
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";

export default {
  name: "alreadyActivityDetail",
  components: {},
  data() {
    return {
      iconLoading: false,
      spinning: false,
      queryDetail: {
        activateTarget: {
          type: ""
        },
        transTargetList: []
      },
      addUpList: [],
      DeductionList: [],
      list: [],
      query: {
        data: {
          transCode: "all",
          settleStatus: "all",
          status: "all",
          agentCode: null,
          transDate: ""
        },
        page: 1,
        pageSize: 10
      },
      pagination: { current: null, total: null },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19, offset: 1 },
          md: { span: 19, offset: 1 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  filters: {
    nameFilter(value) {
      if (value) {
        return "*" + value.substring(1, value.length);
      }
      return "";
    },
    phoneFilter(value) {
      if (value) {
        return (
          value.substring(0, 3) + "****" + value.substring(7, value.length)
        );
      }
      return "";
    },

    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    dateFilter: function(value) {
      if (value) {
        let year = value.substring(0, 4);
        let mouth = value.substring(4, 6);
        let day = value.substring(6, 8);
        return year + "-" + mouth + "-" + day;
      }
    },
    AccountNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** ***$1");
      }
    },
    cashfilter(value) {
      // return parseFloat(value / 100).toFixed(2) + "元";
      return value + "元";
    }
  },
  mounted() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
  },
  methods: {
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    getQueryDetail(id) {
      api.getSubListDetail(
        id,
        res => {
          console.log(res);
          if (res.code == "OK") {
            this.queryDetail = res.data;
            if (this.queryDetail.transTargetList.length > 0) {
              // 处理交易量数据
              this.queryDetail.transTargetList.forEach((item, index) => {
                if (item.type == "achieve") {
                  this.addUpList.push(item);
                } else if (item.type == "un_achieve") {
                  this.DeductionList.push(item);
                }
              });
            }
          }
        },
        err => {}
      );
    },

    backTransList() {
      this.$router.push("/marketing/alreadyActivity");
    }
  }
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 45%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
</style>